<html>
<meta charset="utf-8">

<head>
    <script src="jquery-3.2.1.min.js"></script>
    <style>
        #img {
            width: 44px;
            height: 44px;
            background: url('img/img_bar.gif') 0 0;
        }

        #img1 {
            width: 44px;
            height: 44px;
            background: url('img/img_bar.gif') 44px 0;
        }

        #img2 {
            width: 44px;
            height: 44px;
            background: url('img/img_bar.gif') 88px 0;
        }



        #img:hover {
            background: url('img/img_navsprites_hover.gif') 0 44px;
        }

        #img1:hover {
            width: 44px;
            height: 44px;
            background: url('img/img_navsprites_hover.gif') 44px 44px;
        }

        #img2:hover {
            width: 44px;
            height: 44px;
            background: url('img/img_navsprites_hover.gif') 88px 44px;
        }
    </style>
</head>
<div>


    <img id="img">

    <img id="img1">

    <img id="img2">



</div>

</html>